<template>
	<view>
		<ttBar title="点名" leftIcon="icon-back" bgColor="#fbc521"></ttBar>
		<dateScroll :rollRule="allList"></dateScroll>
		<scroll-view v-if="isShow" :scroll-y="true" class="rollCallList" :style="{ height: scHeight + 'px' }">
			<block v-for="(item, index) in showList">
				<view class="row" :key="index">
					<view class="timeAndOp">
						<text class="time">{{ item.classTime }}</text>
						<text v-if="statusArr[index]" class="btn hasHistory"  @tap="toEdit(index)" >考勤记录</text>
						<text v-if="!statusArr[index]" class="btn"  @tap="toRoll" :data-index="index" >日常签到</text>
					</view>
					<text class="className">{{ item.className }}</text>
					<text class="goodName">{{ item.courseName }}</text>
					<text class="rooName">{{ item.classRoom }}</text>
				</view>
			</block>
			<block v-if="showList.length < 1"><emptyBox></emptyBox></block>
			<!-- <view class="row">
				<view class="timeAndOp">
					<text class="time">7:00 - 9:00</text>
					<text class="btn hasHistory">考勤记录</text>
				</view>
				<text class="className">班级名称</text>
				<text class="goodName">课程名称</text>
				<text class="rooName">教室</text>
			</view> -->
		</scroll-view>
		<view class="btmBox" @tap="toPage" data-url="checkWorkList">
			<text class="iconfont icon-sousuo1"></text>
			<text>搜索班级直接点名</text>
		</view>
	</view>
</template>

<script>
import API from '@/common/api.js';
import TL from '@/common/tool.js';
import COMM from '@/common/common.js';
import ttBar from '@/components/ttBar/ttBar.vue';
import dateScroll from '@/components/dateScroll/dateScroll.vue';
import emptyBox from '../../components/emptyBox/emptyBox.vue';
import { mapState } from 'vuex';
export default {
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			selectShop: state => state.shop.selectShop
		})
	},
	components: {
		ttBar,
		dateScroll,
		emptyBox
	},
	data() {
		return {
			scHeight: uni.getSystemInfoSync().screenHeight - uni.getSystemInfoSync().statusBarHeight - uni.upx2px(420),
			weekFmt: ['周一', '周二', '周三', '周四', '周五', '周六','周日'],
			showList: [],
			week: '',
			allList: {},
			statusArr:[],
			selectDate:'',
			isShow:true,
			oldData:{},
		};
	},
	methods: {
		toEdit(e){
			let _index=parseInt(e);
			let _data={
				classId:this.showList[_index].classId,
				className:this.showList[_index].className,
				goodName:this.showList[_index].courseName,
				classRoom:this.showList[_index].classRoom,
				teacherName:this.showList[_index].teacherName.substr(0,this.showList[_index].teacherName.length-1),
				week:this.weekFmt[this.week],
			}
			uni.setStorageSync('classInfo',_data)
			this.toPage({
				url:'editWork',
				btid:this.statusArr[_index]
			})
		},
		toRoll(e){
			let _index=parseInt(e.currentTarget.dataset.index);
			let _now=parseInt(TL.datePattern(new Date(),'yyyyMMdd'));
			let _thisTime=parseInt(this.selectDate.split('-').join(''));
			if(_now<_thisTime){
				uni.showToast({
					title: '只能在今天及今天以前的日期进行考勤签到',
					icon: 'none'
				});
			}else{
				let _data=this.showList[_index];
				_data.rollDate=this.selectDate;
				uni.setStorageSync('classTable',_data)
				this.toPage({
					url:"rollDetail"
				})
			}
		},
		changeShow(e) {
			if(e.hasClass){
				this.selectDate=e.fullDate;
				let _arr= this.allList[e.weekNum.toString()].find((x,i)=>{
					return  x.group== this.weekFmt[e.week]
				})
				
				let _ar2=_arr.data.filter((x,i)=>{
					
					// 满足条件  被选择日期>=规则开始日期  &&  规则星期等于选择星期 && （没有结束日期 || 有结束日期 && 被选中日期<=规则结束日期）
					return ((x.weekNum-1)==e.week) && (TL.dateStrToNum(e.fullDate)>=TL.dateStrToNum(x.startDate)) &&   (!x.endTime || (x.endTime && TL.dateStrToNum(e.fullDate)<=TL.dateStrToNum(x.endTime)))
				})
				if(_ar2){
					this.showList=_ar2;
					this.getStatus(e.fullDate)
				}else{
					this.showList=[]
				}
			}else{
				this.showList=[]
			}
			
		},
		getStatus(_str){
			let _this=this;
			this.statusArr=[];
			API.apiGetGetRollCallStatus({
				begin:_str
			}).then(res=>{
				if(res.data.code==1){
					let _arr=new Array(this.showList.length)
					
					this.showList.forEach((x,i)=>{
						
						if(res.data.data.length>0){
							res.data.data.forEach((m,n)=>{
								if(m.begin==x.begin&&m.end==x.end&&m.class_id==x.classId&&m.timetableId==x.id){
									_arr[i]=m.batch_id;
									return false;
								}
							})
						}else{
							_arr[i]='';
						}
					})
					this.statusArr=_arr;
					_this.isShow=false;
					_this.isShow=true;
				}
				
			})
		},
		getData() {
			API.apiGetRollCallRule({
				teacherId: this.userInfo.userId.toString(),
				weekNum: 0
			}).then(res => {
				if (res.data.code == 1) {
					this.oldData['0']=res.data.data;
					let _arr=res.data.data.sort((a,b)=>{
						return TL.compareTimeStr(a.begin,b.begin)
					})
					this.allList['0'] = TL.classTableGroup(_arr, 'classDate');
					if(res.data.data.length>0){
						let _arr= this.allList['0'].find((x,i)=>{
							return  x.group== this.weekFmt[this.week]
						})
						let _ar2=_arr.data.filter((x,i)=>{
							return ((x.weekNum-1)==this.week) && (TL.dateStrToNum(this.selectDate)>=TL.dateStrToNum(x.startDate)) &&   (!x.endTime || (x.endTime && TL.dateStrToNum(this.selectDate)<=TL.dateStrToNum(x.endTime)))
						})
						if(_ar2){
							this.showList=_ar2;
							this.getStatus(this.selectDate)
						}else{
							this.showList=[]
						}
						
					}
					
				}
			});
			API.apiGetRollCallRule({
				teacherId: this.userInfo.userId.toString(),
				weekNum: -1
			}).then(res => {
				if (res.data.code == 1) {
					this.oldData['-1']=res.data.data;
					let _arr=res.data.data.sort((a,b)=>{
						return TL.compareTimeStr(a.begin,b.begin)
					})
					this.allList['-1'] = TL.classTableGroup(_arr, 'classDate');
					
				}
			});
			API.apiGetRollCallRule({
				teacherId: this.userInfo.userId.toString(),
				weekNum: -2
			}).then(res => {
				if (res.data.code == 1) {
					this.oldData['-2']=res.data.data;
					let _arr=res.data.data.sort((a,b)=>{
						return TL.compareTimeStr(a.begin,b.begin)
					})
					this.allList['-2'] = TL.classTableGroup(_arr, 'classDate');
					
				}
			});
			API.apiGetRollCallRule({
				teacherId: this.userInfo.userId.toString(),
				weekNum: 1
			}).then(res => {
				if (res.data.code == 1) {
					this.oldData['1']=res.data.data;
					let _arr=res.data.data.sort((a,b)=>{
						return TL.compareTimeStr(a.begin,b.begin)
					})
					this.allList['1'] = TL.classTableGroup(_arr, 'classDate');
					
				}
			});
			API.apiGetRollCallRule({
				teacherId: this.userInfo.userId.toString(),
				weekNum: 2
			}).then(res => {
				if (res.data.code == 1) {
					this.oldData['2']=res.data.data.sort((a,b)=>{
						return TL.compareTimeStr(a.begin,b.begin)
					});
					this.allList['2'] = TL.classTableGroup(res.data.data, 'classDate');
					
				}
			});
		}
	},
	onLoad() {
		this.week = new Date().getDay()==0?6:(new Date().getDay()-1);
		
		this.selectDate=TL.datePattern(new Date(), 'yyyy-MM-dd');
		this.getData();
		
		uni.$on('dateChange', payload => {
			this.week = parseInt(payload.week);
			this.selectDate=payload.fullDate;
			this.changeShow(payload);
		});
		uni.$on("rollRefresh",payload=>{
			this.getData();
		})
	},
	onPullDownRefresh() {
		setTimeout(() => {
			uni.stopPullDownRefresh();
			this.getData()
		}, 1500);
	}
};
</script>

<style lang="less" >
page {
	background-color: #f6f6f6;
}

.btmBox {
	position: fixed;
	width: 100%;
	height: 90upx;
	bottom: 0;
	left: 0;
	background-color: #ffffff;
	box-shadow: 0rpx -2rpx 21rpx 0rpx rgba(0, 0, 0, 0.05);
	display: flex;
	justify-content: center;
	align-items: center;
	.iconfont {
		background-color: #fbc521;
		color: #ffffff;
		font-size: 32upx;
		width: 60upx;
		height: 60upx;
		display: block;
		line-height: 60upx;
		text-align: center;
		border-radius: 50%;
		margin-right: 20upx;
	}
	text {
		color: #fbc521;
		font-size: 32upx;
	}
}
.rollCallList {
	display: flex;
	flex-direction: column;
	padding: 20upx 18upx;
	box-sizing: border-box;
	background-color: #f6f6f6;
	.row {
		display: flex;
		flex-direction: column;
		background-color: #ffffff;
		box-shadow: 0rpx 3rpx 17rpx 0rpx rgba(201, 202, 208, 0.15);
		border-radius: 10upx;
		padding: 20upx;
		margin-bottom: 20upx;
		padding-left: 44upx;
		.timeAndOp {
			display: flex;
			align-items: center;
			margin-bottom: 10upx;
			.time {
				font-size: 40upx;
				color: #202932;
				flex: 1;
			}
			.btn {
				box-sizing: border-box;
				font-size: 28upx;
				color: #ffffff;
				background-color: #ffba25;
				height: 50upx;
				width: 200upx;
				text-align: center;
				line-height: 46upx;
				border-radius: 10upx;
				border: 2upx solid #ffba25;
			}
			.hasHistory {
				background-color: #ffffff;
				color: #ffba25;
			}
		}
		.className,
		.goodName,
		.rooName {
			font-size: 28upx;
			color: #818181;
		}
	}
}
</style>
